<template>
    <div class="order_detail">
        <div class="base_header">
            <img src="../../assets/img/back.png" alt="" @click="goBack">订单详情
        </div>
        <div class="order_status">
            <div>
                <p class="p1" v-if="orderDetail.status == '0'">等待买家付款</p>
                <p class="p1" v-else-if="orderDetail.status == '1'">买家已支付</p>
                <p class="p1" v-else-if="orderDetail.status == '2'">卖家已发货</p>
                <p class="p1" v-else-if="orderDetail.status == '3'">买家已收货</p>
                <p class="p1" v-else-if="orderDetail.status == '4'">订单退款中</p>
                <p class="p1" v-else-if="orderDetail.status == '5'">订单已退款</p>
                <p class="p1" v-else-if="orderDetail.status == '7'">退款已拒绝</p>
                <p class="p1" v-else>订单已取消</p>
                <p class="p2" v-if="orderDetail.status == '0'">{{remainingTime}}</p>
            </div>
            <img src="../../assets/img/order/daifukuan.png" alt="" v-if="orderDetail.status == '0'">
            <img src="../../assets/img/order/daifahuo.png" alt="" v-else-if="orderDetail.status == '1'">
            <img src="../../assets/img/order/daishouhuo.png" alt="" v-else-if="orderDetail.status == '2'">
            <img src="../../assets/img/order/success.png" alt="" v-else-if="orderDetail.status == '3'">
            <img src="../../assets/img/order/tuihuozhong.png" alt="" v-else-if="orderDetail.status == '4'">
            <img src="../../assets/img/order/close.png" alt="" v-else-if="orderDetail.status == '5'">
            <img src="../../assets/img/order/close.png" alt="" v-else>
        </div>
        <div class="order_location"
             v-if="orderDetail.status != '4'&&orderDetail.status != '5'&&orderDetail.status != '7'">
            <img src="../../assets/img/order/order-loca.png" alt="">
            <div>
                <p>收货人：{{orderDetail.receiverName}}</p>
                <p>{{orderDetail.receiverMobile}}</p>
                <p>地址：{{orderDetail.receiverAddress}}</p>
            </div>
        </div>
        <div class="goods_info" v-for="deliveryOrder in orderDetail.deliveryOrders"
             v-if="orderDetail.status != '4'&&orderDetail.status != '5'&&orderDetail.status != '7'">
            <div class="order_title">
                <img src="../../assets/img/order/shop_icon.png" alt="">
                <router-link :to="{path:'/shop',query:{shopId:deliveryOrder.shopId}}">{{deliveryOrder.shopName}} >
                </router-link>
            </div>
            <div class="order_info" v-for="product in deliveryOrder.products">
                <router-link :to="{path:'/detail',query:{productId:product.productId}}">
                    <img :src="imageDomain+product.image" alt="">
                </router-link>
                <p class="p1">{{product.name}}<br><span class="gray f12">{{product.spec}}</span></p>
                <p class="p2"><span>￥{{product.price}}</span><br><span class="gray">X{{product.quantity}}</span></p>
            </div>
        </div>
        <div class="order_bar" v-if="orderDetail.status != '4'&&orderDetail.status != '5'&&orderDetail.status != '7'">
            <p class="gray">运费 <span class="fr">￥{{orderDetail.totalCarriage}}</span></p>
            <p>实付款(含运费) <span class="fr">￥{{orderDetail.payAmount}}</span></p>
        </div>
        <div class="order_infos" v-if="orderDetail.status != '4'&&orderDetail.status != '5'&&orderDetail.status != '7'">
            <p>订单编号：<span id="foo">{{orderDetail.deliveryOrders[0].deliveryOrderCode}}</span>
                 <span class="fr f12 btn" style="color:black;border:1px solid #999;padding:3px" data-clipboard-target="#foo" @click="copy()">复制</span>
            </p>
            <p>下单时间：{{orderDetail.createOrderTime}}</p>
            <p v-show="orderDetail.status != '0' && orderDetail.status != '6' && orderDetail.status != '9'">
                付款时间：{{orderDetail.payTime}}</p>
            <p v-show="orderDetail.status != '0' && orderDetail.status != '1' && orderDetail.status != '6' && orderDetail.status != '9'">
                发货时间：{{orderDetail.deliveryTime}}</p>
            <p v-show="orderDetail.status != '0' && orderDetail.status != '1' && orderDetail.status != '2' && orderDetail.status != '6' && orderDetail.status != '9'">
                成交时间：{{orderDetail.receiveTime}}</p>
        </div>
        <!--退货模块-->
        <div class="back_prompt mb10" v-if="orderDetail.status == '4'">
            <p class="p10 f14 bb">如果商家收到货并验货无误，将操作退款给您</p>
            <div class="bb">
                <ul>
                    <li>如果商家拒绝退款，需要您修改退款申请</li>
                    <li>如果商家超时未处理，将自动退款给您</li>
                </ul>
            </div>
            <div class="back_bts">
                <span class="blue" @click="cancelApply()">撤销退款</span><span class="blue" @click="goReceive()">确认收货</span>
            </div>
        </div>
        <div class="back_prompt mb10" v-if="orderDetail.status == '7'">
            <p class="p10 f14 bb">拒绝原因</p>
            <div class="bb">
                <ul>
                    <li>{{orderDetail.refundOrder.refuseReason}}</li>
                </ul>
            </div>
            <div class="back_bts">
                <span @click="cancelApply()">撤销退款</span><span class="blue" @click="backApply()">重新申请</span><span
                    class="blue" @click="goReceive()">确认收货</span>
            </div>
        </div>
        <div class="back_module mb10" v-if="orderDetail.status == '5'">
            退款金额 <span class="blue ml10 fr">￥{{orderDetail.refundOrder.refundAmount}}</span>
        </div>
        <div class="back_info mb1"
             v-if="orderDetail.status == '4'||orderDetail.status == '5'||orderDetail.status == '7'">
            <p class="p10 f14">退款信息</p>

            <div class="back_goods_info">
                <div class="order_info" v-for="product in orderDetail.refundOrder.products">
                    <router-link :to="{path:'/detail',query:{productId:product.productId}}">
                        <img :src="imageDomain+product.image" alt="">
                    </router-link>
                    <p class="p1">{{product.name}}<br><span class="gray f12">{{product.spec}}</span></p>
                    <p class="p2"><span>￥{{product.price}}</span><br><span class="gray">X{{product.quantity}}</span></p>

                </div>
                <div class="back_item">
                    <p>退款原因：{{orderDetail.refundOrder.reason}}</p>
                    <p>退款金额：￥{{orderDetail.refundOrder.refundAmount}}</p>
                    <p>申请件数：{{orderDetail.refundOrder.refundQuantity}}</p>
                    <p>申请时间：{{orderDetail.refundOrder.createTime}}</p>
                    <p>退款编号：{{orderDetail.refundOrder.refundOrderCode}}</p>
                </div>
            </div>
        </div>
        <div class="order_bts">
            <span v-show="orderDetail.status == '0'" @click="goChancel()">取消订单</span>
            <span class="blue" v-show="orderDetail.status == '0'" @click="goPay()">去支付</span>
            <span class="blue" v-if="orderDetail.status == '1'||orderDetail.status == '2'"
                  @click="backApply()">申请退款</span>
            <router-link
                    :to="{path:'/logistics',query:{deliveryOrderCode:orderDetail.deliveryOrders[0].deliveryOrderCode}}">
                <span v-show="orderDetail.status != '0'  && orderDetail.status != '1'&&orderDetail.status != '4'&&orderDetail.status != '5'&&orderDetail.status != '7'">查看物流</span>
            </router-link>
            <span @click="goReceive()" v-show="orderDetail.status == '2'">确认收货</span>
        </div>
    </div>
</template>

<style>
    @import url("./order_detail.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'
    import {MessageBox} from 'mint-ui'
    import Clipboard from 'clipboard';
    export default {
        data() {
            return {
                deliveryOrderCode: this.$route.query.deliveryOrderCode,
                orderDetail: {deliveryOrders: [{deliveryOrderCode: ""}]},
                remainingTime: "剩" + 0 + "天" + 0 + "时" + 29 + "分" + 59 + "秒自动关闭",
                imageDomain: "",
                timeObject: "",
                payOrder: {
                    products: [{productId: "", quantity: ""}],
                    receiveAddress: "",
                    receiverName: "",
                    receiverPhone: "",
                    token: ""
                },
                payOrderResult: {}
            }
        },
        created() {
             window.scrollTo(0,0);
            let url = API.serviceDomain + API.orderDetail + "/" + this.deliveryOrderCode;
            this.$http.get(url).then(
                (res) => {
                    if (res.body.status == '000000') {
                        this.orderDetail = res.body.data;
                        let _this = this;
                        _this.orderDetail.createOrderTime = _this.orderDetail.createOrderTime.replace(/-/g, "/")
                        _this.timeObject = setInterval(function () {
                            //获取当前时间
                            var date = new Date();
                            var now = date.getTime();
                            var orderDate = new Date(_this.orderDetail.createOrderTime);
                            //设置截止时间
                            var endDate = new Date(orderDate.getTime() + 1000 * 1800);
                            var end = endDate.getTime();
                            //时间差
                            var leftTime = end - now;
                            //定义变量 d,h,m,s保存倒计时的时间
                            var d = 0, h = 0, m = 0, s = 0;
                            if (leftTime >= 0) {
                                d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                                h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                                m = Math.floor(leftTime / 1000 / 60 % 60);
                                s = Math.floor(leftTime / 1000 % 60);
                            } else {
                                //_this.orderDetail.status = '6';
                            }
                            if (d == 0 && h == 0 && m == 0 && s == 0) {
                                clearInterval(_this.timeObject);
                            }
                            _this.remainingTime = "剩" + d + "天" + h + "时" + m + "分" + s + "秒自动关闭";
                        }, 1000);

                    } else {
                        Layer.showMsg(res.body.message);
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )
        },
        mounted() {
            this.imageDomain = API.imageDomain;
            let token = localStorage.getItem('token');
            if (!token) {
                Layer.showMsg("您还未登录!");
                this.$router.push({path: '/login'});
            }
        },
        methods: {
            copy(){
                var clipboard = new Clipboard('.btn');
                clipboard.on('success', function(e) {
                    Layer.showMsg("订单号复制成功")
                });
            },
            goBack() {
                clearInterval(this.timeObject);
                this.$router.goBack();
            },
            backApply() {
                this.$router.push({path: '/back_apply', query: {'goods': this.orderDetail}})
            },
            checkMenu(type) {

            },
            goPay() {
                if (this.orderDetail.status == '0') {
                    this.payOrderResult.payAmount = this.orderDetail.payAmount;
                    this.payOrderResult.payOrderCode = this.orderDetail.payOrderCode;
                    this.$router.push({path: '/channel', query: {'payOrder': this.payOrderResult}})
                } else {
                    Layer.showMsg("订单已支付!");
                }
            },
            goReceive() {
                let _this = this;
                MessageBox.confirm('确认收到货物?').then(action => {
                    let url = API.serviceDomain + API.orderReceive;
                    this.$http.post(url, {deliveryOrderCode: this.orderDetail.deliveryOrders[0].deliveryOrderCode}).then(
                        (res) => {
                            if (res.body.status == '000000') {
                                Layer.showMsg("确认成功");
                                let url = API.serviceDomain + API.orderDetail + "/" + this.deliveryOrderCode;
                                this.$http.get(url).then(
                                    (res) => {
                                        if (res.body.status == '000000') {
                                            this.orderDetail = res.body.data;
                                        }
                                    }
                                );
                            } else {
                                Layer.showMsg(res.body.message)
                                return
                            }
                        },
                        (error) => {
                            Layer.showMsg("服务器开小差了...")
                            return
                        });
                });
            },
            goChancel() {
                let _this = this;
                MessageBox.confirm('确认取消订单?').then(action => {
                    let url = API.serviceDomain + API.orderCancel;
                    this.$http.post(url, {
                        deliveryOrderCode: this.orderDetail.deliveryOrders[0].deliveryOrderCode,
                        cancelReason: "买家发起订单取消"
                    }).then(
                        (res) => {
                            if (res.body.status == '000000') {
                                Layer.showMsg("取消成功");
                                let url = API.serviceDomain + API.orderDetail + "/" + this.deliveryOrderCode;
                                this.$http.get(url).then(
                                    (res) => {
                                        if (res.body.status == '000000') {
                                            this.orderDetail = res.body.data;
                                        }
                                    }
                                );
                            } else {
                                Layer.showMsg(res.body.message)
                                return
                            }
                        },
                        (error) => {
                            Layer.showMsg("服务器开小差了...")
                            return
                        });
                });
            },
            goLogistics() {
                this.$router.push({path: '/logistics', query: this.orderDetail.deliveryOrders[0].deliveryOrderCode});
            },
            cancelApply() {
                let _this = this;
                MessageBox.confirm('确定取消退款?').then(action => {
                    let url = API.serviceDomain + API.cancelApply + '/' + _this.orderDetail.refundOrder.refundOrderId;
                    this.$http.post(url).then(
                        (res) => {
                            if (res.body.status == '000000') {
                                Layer.showMsg("撤销成功.");
                                this.$router.goBack();
                            } else {
                                Layer.showMsg(res.body.message);
                            }
                        },
                        (error) => {
                            Layer.showMsg("服务器开小差了...")
                            return
                        }
                    )
                });
            }
        }
    }
</script>
